import React, {Component} from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import {NavBar, Icon, List, InputItem, Toast, Button} from 'antd-mobile';
import './styles/login.less'
import axios from 'axios'
import qs from 'qs'

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {
            cellphone: "",
            password: ""
        }
    }

    render() {
        return (
            <div className="loginNav">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" style={{color: "black"}}/>}
                    onLeftClick={() => {window.history.go(-1)}}
                >登陆</NavBar>
                <div className="formList">
                    <input type="text" placeholder="手机号" onChange={this.changeUser.bind(this)}
                           value={this.state.cellphone}/>
                    <input type="password" placeholder="密码" onChange={this.changePass.bind(this)}
                           value={this.state.password}/>
                    <Button type="warning" onClick={this.handleClick.bind(this)}>登陆</Button>
                </div>

            </div>
        );
    }

    changeUser(e) {
        this.setState({
            cellphone: e.target.value
        })
    }

    changePass(e) {
        this.setState({
            password: e.target.value
        })
    }

    handleClick() {
        axios.post('http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f', qs.stringify({
            cellphone: this.state.cellphone,
            password: this.state.password
        })).then((res) => {
            if(res.data.code == 200){
                alert("登陆成功")
                this.props.history.push({pathname:"/index"})
            }else{
                alert("登陆失败")
            }
        })
    }
}

export default Login;